<template>
  <div class="DetailRules">
    <DetailSlot title="预定须知">
      <template #default>
        <div class="orderRule" v-for="(item, index) in rulesModule.orderRules" :key="index">
          <div class="left">{{ item.title }}</div>
          <div class="middle">{{ item.introduction }}</div>
          <div class="right" v-if="item.tips">查看说明</div>
        </div>
      </template>
    </DetailSlot>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import DetailSlot from '../../../components/DetailSlot/DetailSlot.vue'

const props = defineProps({
  rulesModule: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style scoped lang="less">
.DetailRules {
  .orderRule {
    display: flex;
    justify-content: space-between;
    line-height: 36px;

    .left {
      width: 60px;
      margin-right: 10px;
    }

    .middle {
      flex: 1;
    }

    .right {
      font-weight: bold;
    }
  }

  :deep(.footer) {
    display: none;
  }
}
</style>
